import React, {Component} from 'react';
import {Text, TextInput, TouchableOpacity, View} from 'react-native';
import CommonStyles from '../commonStyles';

export default class extends Component {
    //初始值
    state = {
        realname: '',
        alipay_count: '',
        verify_code: ''
    };
    submit = () => {
        const {submit} = this.props;
        const {realname, alipay_count, verify_code} = this.state;
        submit(realname, alipay_count, verify_code);
    };

    componentWillReceiveProps(props) {
        if (props.userInfo !== this.props.userInfo) {
            this.setState({
                realname: props.userInfo.realname,
                alipay_count: props.userInfo.alipay_count
            });
        }
    }

    render() {
        const {realname, alipay_count, verify_code} = this.state;
        const {sendSms, userInfo, isCodeGetting, time} = this.props;
        let text = <Text style={CommonStyles.codeBtnText}>获取验证码</Text>;
        if (isCodeGetting || time) {
            text = <Text style={[CommonStyles.codeBtnText, {color: 'gray'}]}>{time || '获取验证码'}</Text>;
        }
        return (
            <View style={CommonStyles.container}>
                <View style={CommonStyles.list}>
                    <View style={[CommonStyles.item]}>
                        <Text style={CommonStyles.label}>真实姓名</Text>
                        <TextInput
                            returnKeyType="next"
                            clearButtonMode="always"
                            underlineColorAndroid="transparent"
                            style={[CommonStyles.input]}
                            onChangeText={text => this.setState({
                                realname: text.trim()
                            })}
                            value={realname}
                            maxLength={6}
                        />
                    </View>
                    <View style={[CommonStyles.item]}>
                        <Text style={CommonStyles.label}>支付宝账号</Text>
                        <TextInput
                            returnKeyType="next"
                            clearButtonMode="always"
                            underlineColorAndroid="transparent"
                            style={[CommonStyles.input]}
                            onChangeText={text => this.setState({
                                alipay_count: text.trim()
                            })}
                            value={alipay_count}
                            maxLength={50}
                        />
                    </View>
                    <View style={[CommonStyles.item]}>
                        <Text style={CommonStyles.label}>手机号</Text>
                        <Text style={CommonStyles.input}>{userInfo.phone}</Text>
                    </View>
                    <View style={[CommonStyles.item]}>
                        <Text style={CommonStyles.label}>验证码</Text>
                        <TextInput
                            returnKeyType="done"
                            clearButtonMode="always"
                            keyboardType="numeric"
                            underlineColorAndroid="transparent"
                            style={[CommonStyles.input]}
                            onChangeText={text => this.setState({
                                verify_code: text.trim()
                            })}
                            value={verify_code}
                            maxLength={6}
                        />
                        <TouchableOpacity onPress={sendSms}>
                            <View style={CommonStyles.codeBtnWrap}>
                                {text}
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
                <TouchableOpacity onPress={this.submit}>
                    <View style={CommonStyles.submitBtnWrap}>
                        <Text style={CommonStyles.submitBtnText}>确认绑定</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}
